<cvc-tag-list size="xs">
  <div
    *ngFor="let tag of displayedTags"
    [ngClass]="{
      'matched-tag':
        matchingText && tag.matchText!.toLowerCase().includes(matchingText),
    }">
    <ng-container
      [ngTemplateOutlet]="tagTemplate"
      [ngTemplateOutletContext]="{ tagType: tagType, tag: tag }">
    </ng-container>
  </div>
  <div [ngClass]="{ 'matched-tag': matchedHiddenCount > 0 }">
    <nz-tag
      class="overflow-tag"
      *ngIf="hiddenCount && hiddenCount > 0"
      nz-popover
      [nzPopoverContent]="enablePopover ? additionalTagPopover : undefined"
      nzPopoverPlacement="top"
      nzPopoverTrigger="hover">
      +<span *ngIf="matchedHiddenCount > 0">
        {{ matchedHiddenCount }}
        of </span
      >{{ hiddenCount }}
    </nz-tag>
  </div>
  <ng-template #additionalTagPopover>
    <div class="popover-tag-list">
      <cvc-tag-list size="xs">
        <div
          *ngFor="let tag of hiddenTags"
          [ngClass]="{
            'matched-tag':
              matchingText &&
              tag.matchText!.toLowerCase().includes(matchingText),
          }">
          <ng-container [ngSwitch]="tagType">
            <ng-container
              [ngTemplateOutlet]="tagTemplate"
              [ngTemplateOutletContext]="{ tagType: tagType, tag: tag }">
            </ng-container>
          </ng-container>
        </div>
      </cvc-tag-list>
    </div>
  </ng-template>
</cvc-tag-list>

<ng-template
  #tagTemplate
  let-tag="tag"
  let-tagType="tagType">
  <ng-container [ngSwitch]="tagType">
    <ng-container *ngSwitchCase="'therapy'">
      <cvc-therapy-tag
        [therapy]="tag"
        [enablePopover]="enablePopover"
        [truncateLongName]="true"></cvc-therapy-tag>
    </ng-container>
    <ng-container *ngSwitchCase="'disease'">
      <cvc-disease-tag
        [disease]="tag"
        [enablePopover]="enablePopover"
        [truncateLongName]="true"></cvc-disease-tag>
    </ng-container>
    <ng-container *ngSwitchCase="'feature'">
      <cvc-feature-tag
        [feature]="tag"
        [enablePopover]="enablePopover"
        [truncateLongName]="true"></cvc-feature-tag>
    </ng-container>
    <ng-container *ngSwitchCase="'organization'">
      <cvc-organization-tag
        [org]="tag"
        [enablePopover]="enablePopover"></cvc-organization-tag>
    </ng-container>
    <ng-container *ngSwitchCase="'variant'">
      <cvc-variant-tag
        [variant]="tag"
        [enablePopover]="enablePopover"></cvc-variant-tag>
    </ng-container>
    <ng-container *ngSwitchCase="'variant-type'">
      <cvc-variant-type-tag
        [variantType]="tag"
        [enablePopover]="enablePopover"></cvc-variant-type-tag>
    </ng-container>
    <ng-container *ngSwitchCase="'variant-feature'">
      <cvc-feature-variant-tag
        [truncateLongName]="true"
        [variant]="tag"
        [enablePopover]="enablePopover"></cvc-feature-variant-tag>
    </ng-container>
  </ng-container>
</ng-template>
